:root element (ie the tag element) enables us to access the variable from any of its descendents/* css */
/* defining css variable on root element ie <html> tag (a pseudoclass) */
:root {
--red: #ff6f69;
--beige: #ffeead;
}
html, body {
background: var(--beige); /* referencing the var */
color: var(--red);
}
h1, p {
color: var(--red);
}
document.querySelector( css_elem ). Where css_elem is the css selector we want to target.getComputedStyle( elem ). Where elem is the selected element we get from querySelector.elemStyle.getPropertyValues( css_var ). Where elemStyle is the saved style returned from getComputedStyle() and css_var is the name of the css variable we want to extract.elem.style.setProperty( css_var, new_value ). Where css_var is the css variable we want to change, and new_value is the new value we want to change it to.--columns: 200px 200px to 1 column in 50 --columns: 200px. We also changed the value of the --beige variable.